/**
 *@auther: tang
 *@Date: 2020-12-02
 *Project: demo
 */
import React from "react"
import {Input,Radio} from "antd"
import "./todos.css"
import TodoList from "./TodoList";
import {observer,inject} from "mobx-react"
import getNowTime from "../util/getNowTime";
@inject("store")
@observer
class Todos extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            nowState:0,
            vals:[]
        }
    }
    onAdd(val){
        if (val.length>0){
            console.log(val);
            this.props.store.TodoData.addDataById(2,{text:val,crDate:getNowTime(),isDid:false,id:val+Math.random()});
        }
        this.setState({
            vals:this.props.store.TodoData.getDataById(this.state.nowState)
        })
    }
    stateChange(val){
        console.log(val);
        this.setState({
            nowState:+val.target.value
        },()=>{
            this.setState({
                vals:this.props.store.TodoData.getDataById(this.state.nowState)
            })
        })
    }
    getData(){
        this.setState({
            vals:this.props.store.TodoData.getDataById(this.state.nowState)
        })
    }
    render() {
        return (
            <>
                <Input.Search placeholder="input search text"
                              allowClear
                              enterButton="Search"
                              size="large"
                              onSearch={this.onAdd.bind(this)}
                              className="inpAdd"
                />
                <TodoList getData={this.getData.bind(this)} nowState={this.state.nowState} data={this.state.vals}/>
                <div>
                    <p>筛选：</p>
                    <Radio.Group onChange={this.stateChange.bind(this)} defaultValue="0">
                        <Radio.Button value="0">所有事项</Radio.Button>
                        <Radio.Button value="1">已完成事项</Radio.Button>
                        <Radio.Button value="2">代办事项</Radio.Button>
                    </Radio.Group>
                </div>
            </>
        )
    }
}

export {Todos as default}
